<template>
    <div class="body-content">
        <div class="header">
            <el-row :gutter="10">
                <el-col :span="12"><div class="grid-content bg-purple">个人知识库</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"><el-input placeholder="请输入..." v-model="input" clearable></el-input></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"><el-button type="primary" plain>新建知识库</el-button></div></el-col>
            </el-row>
            <div class="header-two">
                <span>常用</span>
                <el-row :gutter="10">
                    <el-col :span="6" v-for="(item, index) in commonUseList" :key="index"><div class="grid-content-light bg-purple-light"></div></el-col>
                    <!-- <el-col :span="6"><div class="grid-content-light bg-purple-light"></div></el-col>
                    <el-col :span="6"><div class="grid-content-light bg-purple-light"></div></el-col> -->
                </el-row>
            </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{prop: 'update', order: 'descending'}"
        >
            <el-table-column
                prop="fileTitle"
                label="名称"
                sortable
                width="360"
            ></el-table-column>
            <!-- <el-link :underline="false"></el-link> -->
            <el-table-column
                prop="uploadTime"
                label="更新时间"
                sortable
                width="360"
            ></el-table-column>
            <el-table-column
                fixed="right"
                label=""
                width="100"
            >
                <template slot-scope="scope">
                    <el-button @click="handleManage(scope.row)" type="primary">管理</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getContentList } from '@/api/content'
export default {
    data() {
        return {
            tableData:[],
            input:'',
            commonUseList:''
        }
    },
    methods:{
        handleManage(row){
            console.log(row)
        },
        fetchList(){
            getContentList(this.token).then(response => {
                console.log(response)
                this.tableData = response.data
                console.log(this.tableData.fileName)
            })
        }
    },
    computed: {
        ...mapGetters([
        'nickName',
        'token'
        ])
    },
    mounted() {
        console.log(this.nickName,this.token)
        this.fetchList()
    }
}
</script>

<style lang="scss" scoped>
.grid-content{
    margin-top: 10px;
    margin-left: 10px;
    height: 100px;
    font-weight: 600;
}
.header-two{
    margin-left: 10px;
}
.grid-content-light{
    margin-top: 10px;
    margin-left: 0%;
    height: 100px;
    font-weight: 600;
}
.bg-purple-light{
    background: lightgray;
}
</style>